<template>
    <div class="demo-wrap">
        <form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-xs-2 control-label">Email</label>
    <div class="col-xs-2">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-xs-2 control-label">Password</label>
    <div class="col-xs-2">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-2">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-2">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
        <div>
            <h3>嵌套列</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <div class="row">
            <div class="col-xs-9">
                Level 1: .col-xs-9
                <div class="row">
                <div class="col-xs-8 col-xs-6">
                    Level 2: .col-xs-8 .col-xs-6
                </div>
                <div class="col-xs-4 col-xs-6">
                    Level 2: .col-xs-4 .col-xs-6
                </div>
                </div>
            </div>
            </div>
        </div>
        <div>
            <h3>列排序</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <div class="row">
                <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
                <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
            </div>
        </div>
        <div>
            <h3>标题</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <h1>h1. Bootstrap heading</h1>
            <h2>h2. Bootstrap heading</h2>
            <h3>h3. Bootstrap heading</h3>
            <h4>h4. Bootstrap heading</h4>
            <h5>h5. Bootstrap heading</h5>
            <h6>h6. Bootstrap heading</h6>

            <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
            <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
            <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
            <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
            <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
            <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
        </div>
        <div>
            <h3>着重</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <strong>rendered as bold text</strong>
        </div>
        <div>
            <h3>斜体</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <em>rendered as italicized text</em>
        </div>
        <div>
            <h3>对齐</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <p class="text-left">Left aligned text.</p>
            <p class="text-center">Center aligned text.</p>
            <p class="text-right">Right aligned text.</p>
            <p class="text-justify">Justified text.</p>
            <p class="text-nowrap">No wrap text.</p>
        </div>
        <div>
            <h3>改变大小写</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <p class="text-lowercase">Lowercased text.</p>
            <p class="text-uppercase">Uppercased text.</p>
            <p class="text-capitalize">Capitalized text.</p>
        </div>
        <div>
            <h3>表格</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <table class="table">
                <caption>Optional table caption.</caption>
                <thead>
                    <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    </tr>
                    <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                    </tr>
                    <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <h3>条纹状表格</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <table class="table table-striped table-hover table-condensed">
                <thead>
                    <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    </tr>
                    <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                    </tr>
                    <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered table-striped">
                <colgroup>
                    <col class="col-xs-1">
                    <col class="col-xs-7">
                </colgroup>
                <thead>
                    <tr>
                    <th>Class</th>
                    <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <th scope="row">
                        <code>.active</code>
                    </th>
                    <td>鼠标悬停在行或单元格上时所设置的颜色</td>
                    </tr>
                    <tr>
                    <th scope="row">
                        <code>.success</code>
                    </th>
                    <td>标识成功或积极的动作</td>
                    </tr>
                    <tr>
                    <th scope="row">
                        <code>.info</code>
                    </th>
                    <td>标识普通的提示信息或动作</td>
                    </tr>
                    <tr>
                    <th scope="row">
                        <code>.warning</code>
                    </th>
                    <td>标识警告或需要用户注意</td>
                    </tr>
                    <tr>
                    <th scope="row">
                        <code>.danger</code>
                    </th>
                    <td>标识危险或潜在的带来负面影响的动作</td>
                    </tr>
                </tbody>
                </table>
        </div>
        <div>
            <h3>表单</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                    <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-xs-2 control-label">Email</label>
                    <div class="col-xs-10">
                    <p class="form-control-static">email@example.com</p>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-xs-2 control-label">Password</label>
                    <div class="col-xs-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                    </div>
                </div>
            </form>
        </div>
        <div>
            <h3>内联表单</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">Name</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">Email</label>
                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                </div>
                <button type="submit" class="btn btn-default">Send invitation</button>
            </form>
        </div>
        <div>
            <h3>表单内联单选多选框</h3>
            <!-- Stack the columns on mobile by making one full-width and the other half-width -->
            <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
            </label>

            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
            </label>
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                </label>
                </div>
                <div class="radio">
                <label>
                    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
                </label>
            </div>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div>
            <h3>高度尺寸</h3>
            <form>
                <div class="controls">
                    <input class="form-control input-lg" type="text" placeholder=".input-lg">
                    <input type="text" class="form-control" placeholder="Default input">
                    <input class="form-control input-sm" type="text" placeholder=".input-sm">

                    <select class="form-control input-lg">
                    <option value="">.input-lg</option>
                    </select>
                    <select class="form-control">
                    <option value="">Default select</option>
                    </select>
                    <select class="form-control input-sm">
                    <option value="">.input-sm</option>
                    </select>
                </div>
            </form>
            <div class="row">
                <div class="col-xs-2">
                    <input type="text" class="form-control" placeholder=".col-xs-2">
                </div>
                <div class="col-xs-3">
                    <input type="text" class="form-control" placeholder=".col-xs-3">
                </div>
                <div class="col-xs-4">
                    <input type="text" class="form-control" placeholder=".col-xs-4">
                </div>
            </div>
            <a class="btn btn-default" href="#" role="button">Link</a>
            <button class="btn btn-default" type="submit">Button</button>
            <input class="btn btn-default" type="button" value="Input">
            <input class="btn btn-default" type="submit" value="Submit">
            <!-- Standard button -->
            <button type="button" class="btn btn-default">（默认样式）Default</button>

            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
            <button type="button" class="btn btn-primary">（首选项）Primary</button>

            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success">（成功）Success</button>

            <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info">（一般信息）Info</button>

            <!-- Indicates caution should be taken with this action -->
            <button type="button" class="btn btn-warning">（警告）Warning</button>

            <!-- Indicates a dangerous or potentially negative action -->
            <button type="button" class="btn btn-danger">（危险）Danger</button>

            <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
            <button type="button" class="btn btn-link">（链接）Link</button>
            <p>
                <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
                <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
                <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
                <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
                <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
            </p>
            <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
            <button type="button" class="btn btn-default btn-lg active">Button</button>
            <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
            <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
            <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
            <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
        </div>
        <div>
            <h3>图片</h3>
            <div class="bs-example bs-example-images" data-example-id="image-shapes">
                <img data-src="holder.js/140x140" class="img-rounded" alt="140x140" style="width: 140px; height: 140px;" src="" data-holder-rendered="true">
                <img data-src="holder.js/140x140" class="img-circle" alt="140x140" src="" data-holder-rendered="true" style="width: 140px; height: 140px;">
                <img data-src="holder.js/140x140" class="img-thumbnail" alt="140x140" src="" data-holder-rendered="true" style="width: 140px; height: 140px;">
            </div>
        </div>
        <div>
            <h3>文本色</h3>
            <div class="bs-example" data-example-id="contextual-colors-helpers">
                <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
            </div>
        </div>
        <div style="margin:0;">
            <p>
                <button type="button" class="btn btn-primary btn-sm" @click="doSubmit">提交</button>
                <button type="button" class="btn btn-default btn-sm" @click="doCancel">取消</button>
            </p>
        </div>
    </div>
</template>

<script>
export default {
    props:['params'],
    methods:{
        doSubmit(){
            this.$emit('cancel-click','我是参数')
        },
        doCancel(){
            this.$emit('cancel-click','我是参数')
        }
    },
    mounted(){
        // console.log()
    }
}
</script>

<style lang="scss">
    .demo-wrap {
        padding:50px;
        &>div {
            margin-bottom: 40px;
        }
    }
</style>
